<template>
    <div class="LogIn_CSS_Class">
        <div class="LogIn_From_CSS_Class">
            <div style="border-radius: 5px 5px 5px 5px; width:46vw;height: 7vh;margin-left: 2vw;margin-bottom: 8vh;">
                <a style="line-height: 7vh;color:aliceblue;font-size: 3vw;margin-left: 10vw;">谷谷学院管理系统</a>
            </div>
            <div style="border-radius: 5px 5px 5px 5px;background-color: #353535; width:46vw;height: 7vh;margin-top: 2vh;margin-left: 2vw;">
                <div style="float: left; width: 10%;height: 100%;">
                    <icon-user  style="width: 100%;height: 70%;margin-top: 0.5vh;color: #8B99A3;"/>
                </div>
                <div style="float: right; width: 90%;height: 100%;">
                    <input style="outline:none;color:aliceblue;width: 90%;height: 70%;margin-top: 0.5vh;" v-model="user">
                </div>
            </div>
            <div style="border-radius: 5px 5px 5px 5px;background-color: #353535; width:46vw;height: 7vh;margin-top: 2vh;margin-left: 2vw;">
                <div style="float: left; width: 10%;height: 100%;">
                    <icon-lock  style="width: 100%;height: 70%;margin-top: 0.5vh;color: #8B99A3;"/>
                </div>
                <div style="float: left; width: 80%;height: 100%;">
                    <input :type="PasswordValue" style="outline:none;color:aliceblue;width: 90%;height: 70%;margin-top: 0.5vh;" v-model="userPassword">
                </div>
                <div style="float: left; width: 10%;height: 100%;">
                    <icon-eye style="width: 100%;height: 70%;margin-top: 0.5vh;color: #8B99A3;" @click="ShowPassword" v-if="ShowPasswordValue==1"/>
                    <icon-eye-invisible style="width: 100%;height: 80%;margin-top: 0.5vh;" @click="HidePassword" v-if="ShowPasswordValue==2"/>
                </div>
            </div>
            <div style="border-radius: 5px 5px 5px 5px;background-color: #353535; width:46vw;height: 7vh;margin-top: 2vh;margin-left: 2vw;">
                <div style="float: left; width: 10%;height: 100%;">
                    <icon-robot style="width: 100%;height: 70%;margin-top: 0.5vh;color: #8B99A3;"/>
                </div>
                <div style="float: left; width: 50%;height: 100%;">
                    <input type="text" style="outline:none;color:aliceblue;width: 90%;height: 70%;margin-top: 0.5vh;" v-model="userCode">
                </div>
                <div style="float: left; width: 40%;height: 100%;">
                    <img :src="userCodeImage" style="width:18.5vw;height: 7vh;" @click="UpdataImage">
                </div>
            </div>
            <div style="border-radius: 5px 5px 5px 5px; background-color:#353535; width:46vw;height: 7vh;margin-top: 2vh;margin-left: 2vw;">
                <input type="radio" name="bb" id="admin" checked value="1" style="margin-top: 1.5vh;margin-left: 9vw;width:4vw;height: 4vh;" @click="InputSelect_One">
                <label for="admin" :class="select_one">管理员</label>
                <input type="radio" name="bb" id="teacher" value="2" @click="InputSelect_Two" style="margin-top: 1.5vh;margin-left: 3.5vw;width:4vw;height: 4vh;">
                <label for="teacher" :class="select_two">教师</label>
            </div>
            <div style="width:46vw;height: 7vh;margin-top: 2vh;margin-left: 2vw;">
                <button @click="LogInButton" style="font-size:1vw">登陆</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import md5 from 'js-md5';
    export default {
        name:'LoginFrom',
        data(){
            return{
                PasswordValue:'password',
                ShowPasswordValue:1,
                SelectValue:1,
                select_one:'select_one_new',
                select_two:'select_two',
                select_three:'select_three',
                userPassword:'',
                user:'',
                userCode:'',
                userCodeImage:'http://127.0.0.1/Kaptcha'
            }
        },
        methods:{
            ShowPassword(){
                this.ShowPasswordValue=2
                this.PasswordValue='text'
            },
            HidePassword(){
                this.ShowPasswordValue=1
                this.PasswordValue='password'
            },
            InputSelect_One(){
                this.SelectValue=1
                this.select_one='select_one_new'
                this.select_two='select_two'
                this.select_three='select_three'
            },
            InputSelect_Two(){
                this.SelectValue=2
                this.select_one='select_one'
                this.select_two='select_two_new'
                this.select_three='select_three'
            },
            InputSelect_Three(){
                this.SelectValue=3
                this.select_one='select_one'
                this.select_two='select_two'
                this.select_three='select_three_new'
            },
            LogInButton(){
                var that=this
                axios.get('http://127.0.0.1/AdminLogin',{
                    params:{
                        user:md5(that.user),
                        userPassword:md5(that.userPassword),
                        userCode:that.userCode,
                        SelectValue:that.SelectValue
                    }
                })
                .then(function(res){
                    if(res.data==1){
                        that.$store.commit("UpLoginState",true)
                        that.$store.commit('updateAdminName',that.user)
                        that.$router.push('/AdminNavigation')
                        // that.$store.state.adminname=that.user
                        // console.log(that.$store.state.adminname)
                    }
                    else if(res.data==2){
                        that.$store.commit("UpLoginState",true)
                        that.$store.commit('updateTeacherName',that.user)
                        that.$router.push('/TeahcerAdmin')
                        // that.$store.state.teachername=that.user
                    }else{
                        alert("账号或密码错误")
                    }
                })
                .catch(function(error){
                    console.log(error)
                })
            },
            UpdataImage(){
                // this.userCodeImage='http://127.0.0.1/Kaptcha'
                this.userCodeImage = 'http://127.0.0.1/Kaptcha?time=' + Date.now()
            }
        }
    }
</script>

<style>
    input{
        border: 0;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
    }
    .select_one{
        color:aliceblue;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    .select_two{
        color:aliceblue;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    .select_three{
        color:aliceblue;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    .select_one_new{
        color:#558AD4;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    .select_two_new{
        color:#558AD4;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    .select_three_new{
        color:#558AD4;
        position: relative;
        top: -1.3vh;
        left: -0.7vw;
        font-size: 1vw;
    }
    button{
        border: 0;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 5px 5px 5px 5px; 
        background-color: #5A9CF8; 
        width:46vw;
        height: 7vh;
        margin-top: 2vh;
        margin-left: 2vw;
        color:aliceblue;
        font-size:100px;
    }
    .LogIn_CSS_Class{
        width: 100vw;
        height: 98vh;
        background-image: url("../assets/bg.7285dd88.jpg");
        background-size: cover;
        background-position: center center;
    }
    .LogIn_From_CSS_Class{
        width: 50vw;
        height: 60vh;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); 
    }
</style>